import React, {useEffect, useRef} from 'react';

import {ProColumns, ProTable} from "@ant-design/pro-table/lib";
import {Modal} from "antd";
import {ProFormInstance} from "@ant-design/pro-form";

export type Props = {
  values: API.InterfaceInfo;
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  visible: boolean;
};

const UpdateModal: React.FC<Props> = (props) => {

  //获取到 Props 的 visible 和 columns
  const { values, visible, columns, onCancel, onSubmit } = props;

  // 这里做一个监听 保证 数据一致性
  const formRef = useRef<ProFormInstance>();

  console.log("values = ",values)

  useEffect(() => {
    if (formRef) {
      formRef.current?.setFieldsValue(values);
    }
  }, [values])

  return (
   <Modal visible={visible} footer={null} onCancel={() => onCancel?.()}>

     <ProTable type="form"
               formRef={formRef}
               columns={columns}
               onSubmit={async (value) => onSubmit?.(value)}
     >

     </ProTable>
   </Modal>
  );
};

export default UpdateModal;
